{% extends 'base.html' %}
{% block title %}信息中心{% endblock %}
{% block head %}
    <style>
        #fixed-container {
            position: fixed; /* 固定定位 */
            right: 20px; /* 固定在页面右侧 20px */
            z-index: 1000; /* 设置层级，确保它在其他元素之上 */
        }
    </style>
{% endblock %}
{% block pageName %}资料信息中心
{% endblock %}
{% block main %}
    <div class="row">
        <div class="col-sm-12 col-md-8">
            <div class="card card-bg">
                <div class="card-body">
                    <div class="mail-header">
                        <div class="mail-title">
                            <h5>{{ content.title }}</h5>
                        </div>

                        <div class="mail-info">
                            <div class="mail-author">
                                <img src="{{ content.author.avatar }}" alt="">
                                <div class="mail-author-info">
                                    <span class="mail-author-name">{{ content.author_name }}</span>
                                    <span class="mail-author-address">{{ content.author.email }}</span>
                                </div>
                            </div>
                            <div class="mail-other-info">
                                <span>{{ content.pub_time|date:"Y年m月d日" }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="open-email-content">

                        <div class="mail-text">
                            {{ content.content|safe }}
                        </div>
                        <span style="color: red">【来源：{{ content.data_source }}】</span>
                    </div>
                    <div class="card">
                        <div class="post-actions">
                            <ul class="list-unstyled">
                                <li>
                                    <a href="#" class="like-btn"><i class="far fa-heart"></i>点赞</a>
                                </li>
                                <li>
                                    <a href="#"><i class="far fa-comment"></i>评论</a>
                                </li>
                                <li>
                                    <a href="#"><i class="far fa-paper-plane"></i>分享</a>
                                </li>
                            </ul>
                        </div>
                        <div class="post-comments">
                            <div class="new-comment">
                                <form action="{% url 'clientApp:pub_comment' %}" method="post">
                                    {% csrf_token %}
                                    <input type="hidden" name="infor_id" value="{{ content.id }}">
                                <div class="input-group mb-3">
                                    <input type="text" class="form-control" placeholder="说些什么吧~"
                                           aria-label="Type Something" aria-describedby="button-addon2" name="comment">
                                    <button class="btn btn-success" type="submit" id="button-addon2">大众评论</button>
                                </div>
                                </form>
                            </div>
                            {% for comment in content.comments.all %}
                            <div class="post-comm">
                                <img src="{{ comment.author.avatar }}" class="comment-img" alt="">
                                <div class="comment-container">
                                          <span class="comment-author">
                                              {{ comment.author.username }}
                                              <small class="comment-date">{{ comment.pub_time|date:"Y年m月d日 h:i" }}</small>
                                          </span>
                                </div>
                                <span class="comment-text">
                                          {{ comment.content }}
                                      </span>
                            </div>
                            {% endfor %}

                        </div>
                    </div>

                </div>

            </div>
        </div>
        <div class="col-sm-12 col-md-4 m-b-md" id="fixed-container">
            <div class="card">
                <div class="card-body">
                    <div class="email-list">
                        <ul class="list-unstyled">
                            {% for data in infor_list %}
                                <li value={{ data.id }}>
                                    <a href="{% url 'clientApp:Information_content' infor_id=data.id %}">
                                        <div class="email-list-item">
                                            <div class="email-author">
                                                <img src="{{ data.author.avatar }}" alt="">
                                                <span class="author-name">{{ data.author_name }}</span>
                                                <span class="email-date">{{ data.pub_time|date:"Y年m月d日" }}</span>
                                            </div>
                                            <div class="email-info">
                                                <span class="email-subject">
                                                  {{ data.title }}
                                                </span>
                                                <span class="email-text text-end">
                                                  {{ data.category.name }}
                                                </span>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block footer %}
{% endblock %}
{% block js %}
{% endblock %}